<template>
    <div id="pressureDate" class="pressureDate">
		<div class="content_wrap">
            <div id="chart_yjzxll"></div>
			<hj-table :apiURL="getTableData" :tableColumn="tableColumn" :searchList="searchList" :searchModel="searchModel" :searchOpeartors="searchOpeartors">
                <!-- 批量操作按钮插槽 -->
                <!-- <template #batchOperation="{selectedData}">
                    <el-button type="primary" icon="el-icon-download" @click="doExport(selectedData)" >导出</el-button>
                </template> -->
                <!-- 自定义列 -->
                <template #direction="{row,index}">
                    <span v-if="row.direction == 0">城区</span>
                    <span v-else-if="row.direction == 1">阳城</span>
                    <span v-else-if="row.direction == 2">康家坝</span>
                </template>
            </hj-table>
		</div>
	</div>
</template>

<script>
// import PanelWrap from '@/components/PanelWrap'
// import {exporYLSJData,exporBGSJData} from '@/api/index.js'
// import { saveAs } from 'file-saver'
export default {
	name:'pressureDate',
	data(){
		return {
			// pageSize:10,
			// pageNum:0,
			// total:0,
			// tableData: [],
			// fullscreenLoading:false,
			// selectIds:[],
            tableColumn:[
                {
                    prop:'id',
                    label:'编号',
                    width:100
                },
                {
                    label:'地区',
                    prop:'direction',
                    // slot:true
                    // filter:true
                    format:(row)=>{
                        return row.direction == '0' ? '城区' : (row.direction == '1' ? '阳城' :'康家坝');
                    }

                },{
                    label:'日期',
                    prop:'day'
                }
                ,{
                    label:'时间',
                    prop:'hour'
                }
                ,{
                    label:'流量（升/秒）',
                    prop:'value'
                }
            ],
            // selectable:'multiple'，
            searchList:[
                {
                    index:1,
                    name:'startDate',
                    label:'开始时间',
                    placeholder:'开始时间',
                    type:'date',
                    format:'yyyy-MM-dd'
                },
                {
                    index:2,
                    label:'截止时间',
                    name:'endDate',
                    placeholder:'截止时间',
                    type:'date',
                    format:'yyyy-MM-dd'
                }
            ],
            searchModel:{
                startDate:'',
                endDate:''
            },
            searchOpeartors:[
                {
                    text:'查询',
                    name:'search',
                    type:'primary'
                },
                {
                    text:'重置',
                    name:'reSet',
                    type:''
                }
            ],
		}
	},
	components:{
		hjTable:() => import('@/components/hjTable/HJTable')
	},
	mounted(){
        this.initCharts_yjzxll();
	},
	methods:{
		getTableData(params){
			return this.$axios.post('http://43.136.137.111:9898/jiangan/night/flow',params);
		},
		//导出
		doExport(selects){
            alert('待开发');
            let selectIds = [];
            for (const item of selects) {
                selectIds.push(item.id)
            }
			// exporBGSJData({ids:selectIds}).then(res => {
			// 	let blob = new Blob([res.data])
			// 	const fliName = '爆管记录'+new Date().getTime()+ '.xlsx'
			// 	saveAs(blob,fliName)
			// 	this.fullscreenLoading = false;
			// }).catch(error => {
			// 	console.log(error)
			// })
		},
		// //选择		
		// selectChange(selection){
		// 	let arr = [];
		// 	selection.forEach(element => {
		// 		arr.push(element.id)
		// 	});
		// 	this.selectIds = arr;
		// }
        initCharts_yjzxll(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data8',{}).then(res => {
				let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['城区', '阳春', '康家坝'],
						right:10,
						top:10,
						icon:'rect',
						itemWidth:8,
						itemHeight:8,
						textStyle:{
							color:'#FFFFFF'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: res.data.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: 'm³',
					},
					series: [
						{
							name: '城区',
							type: 'line',
							stack: 'Total',
							data:res.data.data[0].value,
							symbol:'none'
						},
						{
							name: '阳春',
							type: 'line',
							stack: 'Total',
							data:res.data.data[1].value,
							symbol:'none'
						},
						{
							name: '康家坝',
							type: 'line',
							stack: 'Total',
							data: res.data.data[2].value,
							symbol:'none'
						}
					]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_yjzxll'));
				myChart.setOption(option);
			})
		},
	}
}
</script>

<style lang="less" scoped>
.pressureDate{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
            height: 100%;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
            display: flex;
            flex-direction: column;
            #chart_yjzxll{
                height: 350px;
            }
			.el-table, .el-table__expanded-cell{
				background-color: transparent;
			}
			.el-table{
                flex: 1;
				margin-top: 10px;
				tr{
					height: 56px;
					background:transparent;
					color: rgba(255, 255, 255, 0.65);
					.status_label{
						display: inline-block;
						width: 54px;
						height: 22px;
						border-radius: 2px;
						color:#FFFFFF;
						font-family: 'Source Han Sans CN';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 21px;
						text-align: center;
					}
					.pending{
						background: #1C84C6;
					}
					.untreated{
						background: #ED5565;
					}
					.processed{
						background: rgba(35, 198, 200, 0.6);
					}
				}
				.el-table th.el-table__cell{
					background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
				}	
				th.el-table__cell{
					background: rgba(11, 117, 216, 0.1);;
				}
				td.el-table__cell, th.el-table__cell.is-leaf{
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
				}
			}
		  
			.el-table::before{
				display: none;
			}
			.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
					background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
					color: rgba(2, 154, 250, 1);
				}
				
			.el-button--primary{
				color: rgba(255, 255, 255, 0.65);
				background: transparent;
				border-color: #023557;
			}
			.el-button--primary:hover{
				border-color: rgba(2, 154, 250, 1);;
				color: rgba(2, 154, 250, 1);
			}
			.el-checkbox__inner{
				background: transparent;
				width: 15px;
				height: 15px;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}

			.block{
				margin-top: 10px;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				.el-input__inner{
					border: 1px solid rgba(255, 255, 255, 0.3);
					background: transparent;
				}
				.el-pager li{
					background: transparent;
				}
				.el-pagination .btn-next, .el-pagination .btn-prev{
					background: transparent;
				}
				span,input,i,li{
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>